<template>
  <div class="shop_admin">
    <div class="table_tab_box">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        v-loading="loadingBool"
      >
        <div class="table_input">
          <p>
            <span>商品分类:</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </p>
          <p>
            <span>商品搜索:</span>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
            <!-- <el-button @click="sousuo">搜索</el-button> -->
          </p>
        </div>
        <p>
          <el-button type="primary" @click="$router.push('/addshop')"
            >添加商品</el-button
          >
        </p>
        <el-tab-pane label="用户管理" name="1"></el-tab-pane>
        <el-tab-pane label="配置管理" name="2"></el-tab-pane>
        <el-tab-pane label="角色管理" name="0"></el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="-1"></el-tab-pane>
      </el-tabs>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        border=""
        style="width: 100%"
        v-loading="flat"
      >
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="200"
        ></el-table-column>
        <el-table-column label="商品图" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.image" alt="" style="height: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="商品名称"></el-table-column>
        <el-table-column
          prop="price"
          label="售价"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="sales"
          label="销量"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="stock"
          label="库存"
          width="200"
        ></el-table-column>
        <el-table-column prop="sort" label="排序" width="120"></el-table-column>
        <el-table-column label="状态" width="150">
          <template slot-scope="scope">
            <el-switch
              :value="scope.row.status >= 1"
              @input="setStatus($event, scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="上架"
              inactive-text="下架"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="optionDate"
          label="操作时间"
          width="180"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="table_fen_box">
      <el-pagination
        background=""
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
/* import { myMixin } from '../../mixin' */
export default {
  /* mixins: [myMixin], */
  data() {
    return {
      loadingBool: false,
      tableData: [], //数据
      value: '', //下拉
      input: '', //搜索框
      activeName: '1',
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      pageIndex: 1,
      pageSize: 5,
      total: 0,
      flat: true, //开关
    }
  },
  created() {
    /* this.pageChange(1) */
    this.allshop(1)
  },
  watch: {
    input() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.allshop(1)
      }, 700)
    },
  },
  methods: {
    setStatus(status, row) {
      setTimeout(() => {
        // 接口返回成功响应
        row.status = status
      }, 500)
    },
    //获取数据
    allshop() {
      this.flat = true
      this.$api
        .allshop({
          pageIndex: 1,
          pageSize: 5,
          classId: this.activeName,
          keyword: this.input,
        })
        .then((res) => {
          this.tableData = res.data
          console.log(res, 'res')
          this.flat = false
        })
    },
    // 分页接口
    async pageChange(ind) {
      this.loadingBool = true
      this.pageIndex = ind
      this.$api
        .adminOne({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        })
        .then((res) => {
          if (res.code === 1) {
            this.tableData = res.data.list
            this.total = res.data.total
          } else {
            // 抛出包错
          }
          this.loadingBool = false
        })
    },
    handleClick() {
      this.allshop(1)
    },
  },
}
</script>
<style lang="scss" scoped>
.shop_admin {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 10px;
  .table_top_box {
  }
  .table_tab_box {
    width: 100%;
    background: #fff;
    p {
      margin: 10px 0;
    }
    .table_input {
      width: 100%;
      display: flex;
      margin: 10px 0;
      p {
        display: flex;
        margin: 0 10px;
        align-items: center;
        .el-input,
        .el-select {
          width: 300px;
        }
        span {
          width: 30%;
          text-align: right;
          padding: 0 10px;
        }
      }
    }
  }
  .table_fen_box {
    width: 100%;
    margin-top: 8px;
  }
}
</style>
